<template>
  <div class="page-container">
    <pf-table
      ref="pfTable"
      v-model="form"
      :columns="columns"
      :form-items="formItems"
      @get-table-data="getTableData"
    >
      <template #image="{row}">
        <el-image
          style="width: 100px; height: 100px"
          :src="row.imgUrl"
          :preview-src-list="[row.imgUrl]"
        />
      </template>
      <template #time="{row}">
        <p>{{ row.startTime }} - </p>
        <p>{{ row.endTime }}</p>
      </template>
      <template #number="{row}">
        <p>{{ row.exposureNum }}/{{ row.clickNum }}</p>
      </template>
      <template #advertStatusStr="{row}">
        <el-tag v-if="row.advertStatus === 2" type="success">{{ row.advertStatusStr }}</el-tag>
        <el-tag v-if="row.advertStatus === 1" type="warning">{{ row.advertStatusStr }}</el-tag>
        <el-tag v-if="row.advertStatus === 0" type="info">{{ row.advertStatusStr }}</el-tag>
        <el-tag v-if="row.advertStatus === 3" type="danger">{{ row.advertStatusStr }}</el-tag>
      </template>
      <template #handle-area>
        <el-button type="primary" @click="addAvert">发布广告</el-button>
      </template>
      <template #handle="{row}">
        <el-button type="text" size="small" @click="showDetail(row)">详情</el-button>
        <el-button v-if="row.advertStatus === 0" type="text" size="small" @click="editStatusHandle(row)">上架</el-button>
        <el-button v-if="row.advertStatus === 2" type="text" class="danger-text-button" size="small" @click="editStatusHandle(row)">下架</el-button>
        <el-button v-if="row.advertStatus !==2" type="text" class="danger-text-button" size="small" @click="deleteHandle(row)">删除</el-button>
      </template>
    </pf-table>
    <AddBanner
      v-if="showBanner"
      :id="advertId"
      @close="closeHandle"
      @confirm="confirmHandle"
    />
  </div>
</template>

<script>
import { getAdvertList, updateStatus, deleteAdvert } from '@/api/advert'
import AddBanner from './AddBanner.vue'
import { ADVERT_STATUS, ADVERT_LOCATION_LIST } from '@/utils/enum'

export default {
  name: 'BannerList',
  components: {
    AddBanner
  },
  data() {
    return {
      advertStatus: ADVERT_STATUS,
      locationOptions: ADVERT_LOCATION_LIST,
      advertId: '',
      showBanner: false,
      form: {},
      loading: false
    }
  },
  computed: {
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { label: '广告标题', prop: 'title', attrs },
        { label: '投放位置', prop: 'deliveryAddressStr', attrs },
        { label: '权重', prop: 'weight', attrs },
        { label: '图片', slot: 'image', attrs },
        { label: '状态', slot: 'advertStatusStr', attrs },
        { label: '投放时间', slot: 'time', attrs },
        { label: '曝光次数/点击次数', slot: 'number', attrs },
        { label: '点击率', prop: 'clickRateStr', attrs },
        { label: '操作', slot: 'handle', attrs: { width: '150px', fixed: 'right' }}
      ]
    },
    formItems() {
      return [
        {
          type: 'input',
          label: '标题',
          prop: 'title'
        }, {
          type: 'select',
          label: '投放位置',
          prop: 'deliveryAddressList',
          options: this.locationOptions,
          attrs: {
            multiple: true
          }
        }, {
          type: 'select',
          label: '状态',
          prop: 'advertStatus',
          options: this.advertStatus
        }
      ]
    }
  },

  methods: {

    getTableData({ pageNo, pageSize, ...formQuery }, done) {
      this.loading = true
      const data = {
        pageNo,
        pageSize,
        type: 0,
        ...formQuery
      }
      getAdvertList(data).then(res => {
        this.loading = false
        done({ data: res.data || [], total: res.count || 0 })
      }).catch(() => {
        done({ data: [], total: 0 })
        this.loading = false
      })
    },

    // 新增
    addAvert() {
      this.advertId = ''
      this.showBanner = true
    },

    // 查看详情
    showDetail(row) {
      this.advertId = row.id
      this.showBanner = true
    },

    // 修改上下架状态
    editStatusHandle(row) {
      let content = ''
      let msg = ''
      let status
      if (row.advertStatus === 2) {
        content = '确定要下架该广告吗'
        msg = '下架成功'
        status = 0
      } else {
        content = '确定要上架该广告吗'
        msg = '上架成功'
        status = 1
      }
      const data = {
        advertId: row.id,
        enableStatus: status
      }
      this.$confirm(content, '提示', {
        type: 'warning'
      }).then(() => {
        updateStatus(data).then(res => {
          this.$message.success(msg)
          this.$refs.pfTable.getTableData()
        }).catch(() => {})
      }).catch(() => {})
    },

    // 下架广告
    deleteHandle(row) {
      const data = {
        advertId: row.id
      }
      this.$confirm('确定要删除该广告吗', '提示', {
        type: 'warning'
      }).then(() => {
        deleteAdvert(data).then(() => {
          this.$message.success('删除成功')
          this.$refs.pfTable.getTableData()
        })
      }).catch(() => {})
    },

    // 关闭弹窗
    closeHandle() {
      this.showBanner = false
    },

    // 确定
    confirmHandle() {
      this.$refs.pfTable.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped></style>
